import React from 'react'
import { useLocation } from 'react-router-dom'  //接收search传参 state传参
import {  useParams } from 'react-router-dom'   //接收params传参
import qs from 'qs'                             //解析查询字符串

export default function List() {
  const location = useLocation();
  const params = useParams();

  const { name} = qs.parse(location.search.split("?")[1]) //search传参

  const {state} = location  //state传参

  const {id} = params;    //params传参

  // console.log(location);
  // console.log(params);

  return (
    <div>
      <p>姓名:{name}</p>
      <p>序号:{id}</p>
      <ul>
        {
          state.map(item => {
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}
